<template>
	<view class="page-cont" :style="useTheme.theme">
		<navbar title="能耗"></navbar>
		<!-- 项目切换 -->
		<view class="device-select" @click="handleOpen">
			<view class="device-name">{{projectName}}</view>
			<image class="device-arrow" :src="isOpen ? '/static/up_black.png' : '/static/down_black.png'"></image>
		</view>
		<!-- 巡检任务 -->
		<view class="inspection-cont">
			<view class="task-cont">
				<view class="task-cont-top">
					<view class="task-cont-title">巡检任务</view>
					<view class="task-cont-time">
						<view :class="['task-cont-time-type', timeActive == index ? 'task-cont-time-active' : '']"
							v-for="(item, index) in timeList" :key="index" @click="timeActive = index">{{item}}
						</view>
					</view>
				</view>
				<view class="task-cont-bottom">
					<view class="task-cont-stat">
						<view :class="['task-cont-stat-item', taskActive == 0 ? 'active' : '']">
							<view :class="['task-cont-stat-name',taskActive==0 ? 'active' : '' ]">待处理</view>
							<view :class="['task-cont-stat-num',taskActive==0 ? 'active' : '' ]">{{taskData.num1}}
							</view>
						</view>
					</view>
					<view class="task-cont-stat">
						<view :class="['task-cont-stat-item', taskActive == 1 ? 'active' : '']">
							<view :class="['task-cont-stat-name',taskActive==1 ? 'active' : '' ]">异常数</view>
							<view :class="['task-cont-stat-num',taskActive==1 ? 'active' : '' ]">{{taskData.num2}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="project-cont">
				<view class="project-list-item" v-for="(item, index) in inspectionList.slice(0,3)" :key="index">
					<view class="project-list-cont">
						<view class="project-list-cont-item" v-for="(childItem, childIndex) in item.childList"
							:key="childIndex">
							<view class="project-list-cont-top">
								<view class="project-list-cont-type">{{childItem.name3}}</view>
								<view class="project-list-cont-title">{{childItem.name4}}</view>
							</view>
							<view class="project-list-cont-detail">{{childItem.name5}}</view>
							<view class="project-list-cont-bottom">
								<view>任务时间：</view>
								<view class="project-list-cont-time">{{childItem.name6}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="project-list-more" v-if="inspectionList.length>3" @tap="toInspectionMore()">
					<text>查看更多</text>
				</view>
			</view>
		</view>

		<!-- 保修受理 -->
		<view class="repair-cont" @tap="">
			<view class="repair-cont-item">
				<view class="repair-cont-item-title">报修受理</view>
				<view class="repair-cont-item-stat">
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">已完成</view>
						<view class="repair-cont-item-num">{{repairData.value1}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">未完成</view>
						<view class="repair-cont-item-num">{{repairData.value2}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">跳过</view>
						<view class="repair-cont-item-num">{{repairData.value3}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">挂起</view>
						<view class="repair-cont-item-num">{{repairData.value4}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">静默</view>
						<view class="repair-cont-item-num">{{repairData.value5}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 保养 -->
		<view class="repair-cont">
			<view class="repair-cont-item">
				<view class="repair-cont-item-title">保养</view>
				<view class="repair-cont-item-stat">
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">待处理</view>
						<view class="repair-cont-item-num">{{repairData.value6}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">待关闭</view>
						<view class="repair-cont-item-num">{{repairData.value7}}</view>
					</view>
					<view class="repair-cont-item-box">
						<view class="repair-cont-item-name">已完成</view>
						<view class="repair-cont-item-num">{{repairData.value8}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 项目选择-->
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="isOpen = false">
			<scroll-view class="popup-cont" scroll-y>
				<view class="popup-header">请选择</view>
				<view class="popup-title" v-for="(item, index) in projectList" :key="index"
					@click="handleDeviceChange(item)">{{item.name}}</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, computed, onMounted, watch } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js"
	const { pageHeight } = useNavbar();
	import useThemeStore from '@/store/theme';
	import * as energy from "@/api/energy.ts";
	const useTheme = useThemeStore();
	const timeList = ref(["总", "日", "周", "月"]);
	const timeActive = ref(0);
	const taskActive = ref(1);
	const taskData = reactive({
		num1: 0,
		num2: 0
	});
	const inspectionList = reactive([{
		name1: "项目1",
		name2: "12",
		childList: [{
			name3: "日任务",
			name4: "电气设备检查V2",
			name5: "02#_冷冻系统_02#冷冻系统冷凝设备…",
			name6: "23:06:36",
		}]
	}, {
		name1: "项目1",
		name2: "12",
		childList: [{
			name3: "日任务",
			name4: "电气设备检查V2",
			name5: "02#_冷冻系统_02#冷冻系统冷凝设备…",
			name6: "23:06:36",
		}]
	}, {
		name1: "项目1",
		name2: "12",
		childList: [{
			name3: "日任务",
			name4: "电气设备检查V2",
			name5: "02#_冷冻系统_02#冷冻系统冷凝设备…",
			name6: "23:06:36",
		}]
	}, {
		name1: "项目1",
		name2: "12",
		childList: [{
			name3: "日任务",
			name4: "电气设备检查V2",
			name5: "02#_冷冻系统_02#冷冻系统冷凝设备…",
			name6: "23:06:36",
		}]
	}]);
	const repairData = reactive({
		value1: 0,
		value2: 0,
		value3: 0,
		value4: 0,
		value5: 0,
		value6: 0,
		value7: 0,
		value8: 0,
	})

	const projectName = ref<string>()
	const projectId = ref<number>()
	const projectList = ref([])
	const isOpen = ref(false)
	const popup = ref()

	const handleOpen = () => {
		isOpen.value = true;
		popup.value.open();
	}

	// 项目切换
	const handleDeviceChange = (e) => {
		isOpen.value = false;
		popup.value.close();
		projectName.value = e.name;
		projectId.value = e.id;
		// getStatisData();
	}


	const getInfo = async () => {
		//获取项目信息
		const projectResult = await energy.getUserProject({})
		projectList.value.push(...projectResult.data)
		if (projectList.value.length > 0) {
			projectName.value = projectList.value[0].name;
			projectId.value = projectList.value[0].id;

		} else {
			uni.showToast({
				title: '暂无项目信息',
				icon: 'none'
			})
			uni.navigateBack({ delta: 1 })
		}
	}

	const toInspectionMore = () => {
		uni.navigateTo({
			url: '/pages/maintain/inspection-more'
		})
	}

	onMounted(() => {
		getInfo()
	})
</script>
<style lang="scss" scoped>
	.page-cont {
		display: flex;
		flex-direction: column;

		.device-select {
			height: 80rpx;
			line-height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: transparent;
			border-bottom: 1px solid #ccc;

			.device-name {
				color: #666;
				font-size: 28rpx;
			}

			.device-arrow {
				padding-left: 10rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.inspection-cont {
			margin-left: 25rpx;
			width: calc(100% - 50rpx);
			margin-top: 20rpx;
			padding: 2rpx;
			border-radius: 10rpx;
			background-color: white;
			box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(135, 166, 233, 0.1);

			.task-cont {
				padding: 20rpx 30rpx 30rpx;
				border-radius: 10rpx;
				background-color: #EFF1F7;

				.task-cont-top {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.task-cont-title {
					color: #333;
					font-size: 28rpx;
					font-weight: 600;
				}

				.task-cont-time {
					display: flex;
					align-items: center;
					border-radius: 4rpx;
					background-color: #E4E9F6;
					overflow: hidden;
				}

				.task-cont-time-type {
					width: 60rpx;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 25rpx;
					text-align: center;
					color: #666;
				}

				.task-cont-time-active {
					color: #fff;
					background-color: $theme-color;
				}

				.task-cont-bottom {
					display: flex;
				}

				.task-cont-stat {
					padding-top: 40rpx;
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.task-cont-stat-item {
					padding: 20rpx 38rpx;
					border-radius: 5rpx;

					&.active {
						background-color: rgba(255, 255, 255, .4);
					}
				}

				.task-cont-stat-name,
				.task-cont-stat-num {
					color: $theme-color;
					font-size: 25rpx;
					text-align: center;

					&.active {
						color: #333;
					}
				}

				.task-cont-stat-num {
					font-size: 51rpx;
					font-weight: 600;
				}
			}

		}

		.repair-cont {
			margin-left: 25rpx;
			width: calc(100% - 50rpx);
			margin-top: 20rpx;
			padding: 2rpx;
			border-radius: 10rpx;
			background-color: white;
			box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(135, 166, 233, 0.1);

			.repair-cont-item {
				margin-top: 20rpx;
				padding: 20rpx 30rpx 50rpx;
				border-radius: 10rpx;
				// background-color: $theme-color;
				background-color: #EFF1F7;

				&:first-child {
					margin-top: 0;
				}
			}

			.repair-cont-item-title {
				color: #333;
				font-size: 28rpx;
			}

			.repair-cont-item-stat {
				padding-top: 60rpx;
				display: flex;
			}

			.repair-cont-item-box {
				flex: 1;
				border-radius: 5rpx;
				margin-left: 20rpx;
				padding-top: 20rpx;
				padding-bottom: 15rpx;
				background-color: rgba(255, 255, 255, 0.4);
			}

			.repair-cont-item-name,
			.repair-cont-item-num {
				color: #333;
				font-size: 25rpx;
				text-align: center;
			}

			.repair-cont-item-num {
				font-size: 51rpx;
					color: #333;
				font-weight: 600;
			}
		}

		.project-cont {
			margin-top: 10rpx;

			.project-list-item {
				padding: 2rpx;
				border-radius: 10rpx;
				background-color: #fff;
				overflow: hidden;
				padding-top: 10rpx;

				&:first-child {
					padding-top: 15rpx;
				}

				&:last-child {
					padding-bottom: 15rpx;
				}
			}

			.project-list-more {
				color: $theme-color;
				font-size: 26rpx;
				padding-top: 25rpx;
				justify-content: center;
				padding-bottom: 25rpx;
				text-align: center;
			}

			.project-list-cont {
				padding-left: 20rpx;
				padding-right: 20rpx;
			}

			.project-list-cont-item {
				padding: 20rpx;
				border-radius: 5rpx;
				background-color: #F7F9FF;

			}

			.project-list-cont-top {
				display: flex;
				align-items: center;
				border-radius: 4rpx;
				background-color: #EFF2FA;
			}

			.project-list-cont-type {
				width: 90rpx;
				height: 36rpx;
				line-height: 36rpx;
				color: #fff;
				font-size: 23rpx;
				text-align: center;
				border-radius: 4rpx;
				background-color: #AAB6DD;
			}

			.project-list-cont-title {
				padding: 0 20rpx;
				width: calc(100% - 90rpx);
				color: #9AACCD;
				font-size: 25rpx;
			}

			.project-list-cont-detail {
				padding-top: 14rpx;
				color: #333;
				font-size: 25rpx;
				font-weight: 600;
			}

			.project-list-cont-bottom {
				padding-top: 18rpx;
				display: flex;
				align-items: center;
				color: #999;
				font-size: 25rpx;
			}

			.project-list-cont-time {
				color: #666;
				font-weight: 600;
			}
		}

		.popup-cont {
			background: #fff;
			max-height: 80vh;

			.popup-title,
			.popup-header {
				height: 100rpx;
				line-height: 100rpx;
				color: #333;
				font-size: 28rpx;
				text-align: center;
				border-top: 2rpx solid #eee;
			}

			.popup-header {
				font-size: 32rpx;
				font-weight: 600;
			}
		}
	}
</style>